<template>
  <div>
    <Title title="解约信息" style="margin-bottom: 16px;" />
    <el-form
      ref="formRef"
      :model="detailData"
      :rules="formRules"
      :label-width="labelWidth"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32">
      <el-row type="flex" class="response-el-row">
        <el-col :span="colSpan" class="responsive-col-lg-8">
          <el-form-item label="创建人" prop="createUser">
            <el-input v-model="detailData.createUser" class="width240" disabled type="text" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" class="responsive-col-lg-8">
          <el-form-item label="所属部门" prop="departmentId">
            <el-cascader
              v-model="detailData.departmentId"
              :show-all-levels="false"
              :options="deptTreeList"
              :props="{
                emitPath:false,
                value: 'id',
                label: 'name',
                checkStrictly: true,
                multiple: false,
              }"
              class="width240"
              placeholder="请选择所属部门"
              size="small"
              collapse-tags
              filterable
              clearable
            >
              <template slot-scope="{ data }">
                <ToolTip v-if="data.name.length > 14" :content="data.name" />
                <span v-else>{{ data.name }}</span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" class="responsive-col-lg-8">
          <el-form-item label="解约说明" prop="terminationExplain">
            <selectWithoutHttp v-model="detailData.terminationExplain" :list-data="explainList" class="width240" key-name="label" label-name="label"/>
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" class="responsive-col-lg-8">
          <el-form-item label="解约日期" prop="terminationTime">
            <el-date-picker
              v-model="detailData.terminationTime"
              clearable
              class="width240"
              value-format="timestamp"
              size="small"
              type="date"
              format="yyyy/MM/dd"
              placeholder="解约日期"/>
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" class="responsive-col-lg-8">
          <el-form-item :class="{'form-mb-0': !showMobilePage}" label="补充说明" prop="explain">
            <el-input v-model="detailData.explain" :maxlength="200" resize="none" class="width240" placeholder="请输入补充说明" type="textarea" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" class="responsive-col-lg-8">
          <el-form-item label="附件" prop="attachment" class="form-mb-0">
            <div class="width240">
              <upAttachment
                ref="uploadImg"
                :hide-confirm="true"
                :file-list="detailData.attachment"
                import-api="/common/file/upload"
                btn-text="上传文件"
                @upProgress="upProgress"
                @complateSetData="complateSetData($event)"
                @removeFileList="removeFileList($event)" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import upAttachment from '@/components/Common/upAttachment/index';
// api
import { getDepartmentAll } from '@/api/config';

export default {
  components: { Title, selectWithoutHttp, upAttachment },
  model: {
    prop: 'detailData',
    event: 'changeData'
  },
  props: {
    detailData: {
      type: Object,
      default: () => { return {}; }
    },
    labelWidth: {
      type: String,
      default: '120px'
    },
    colSpan: {
      type: Number,
      default: 12
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formRules: {
        terminationTime: [{ required: true, trigger: 'change', message: '请选择解约日期' }],
        terminationExplain: [{ required: true, trigger: 'change', message: '请选择解约说明' }],
        departmentId: [{ required: true, trigger: 'change', message: '请选择所属部门' }]
      },
      deptTreeList: [],
      explainList: [
        { value: 0, label: '合约未到期 - 主动解约' },
        { value: 1, label: '合约未到期 - 被动解约' },
        { value: 2, label: '合约到期 - 试合作期满解约' },
        { value: 3, label: '合约到期 - 正式合作期满解约' },
        { value: 4, label: '特殊解约 - 特殊被动解约' },
        { value: 5, label: '特殊解约 - 特殊主动解约' },
        { value: 6, label: '特殊解约 - 其他特殊情况' }
      ]
    };
  },
  created() {
    this.queryDeptTreeList();
  },
  methods: {
    // 获取所属部门
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      });
    },
    // 上传文件
    upProgress() {
      // this.createLoading = true;
    },
    complateSetData({ data, fileName }) {
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      if (this.detailData.attachment) {
        this.detailData.attachment.push(fileList);
      } else {
        this.$set(this.detailData, 'attachment', [fileList]);
      }
      this.$emit('changeData', this.detailData);
    },
    removeFileList({ file, index }) {
      this.detailData.attachment.splice(index, 1);
    },
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.formRef.validate(valid => {
          if (valid) {
            resolve(valid);
          } else {
            reject();
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
  &::v-deep {
    .el-select {
      width: 240px;
    }
    .el-input__inner {
      width: 240px;
    }
  }
}
.form-mb-0 {
  margin-bottom: 0;
}
</style>
